<template>
	<view id="exchange" class="digital-page">
		<back-btn></back-btn>
		<view class="banner">
			<view class="title-area">
				<div class="title-cn">两岸交流</div>
				<div class="title-en">Cross-strait exchanges</div>
			</view>
		</view>
		
		<view class="main-content">
			<view class="header">
				历史渊源
			</view>
			<view class="tab-container">
				<view class="tabs">
					<view v-for="(item,index) in upperRow" class="tab" @click="n=index" >
						<view class="cn">
							{{item.Topic}}
						</view>
						<view class="en" :class="n==index?'col':''">
						</view>
					</view>
				</view>
				<view class="tab-panes" >
					<view class="tab-pane">
						<view class="img-mini">
							<view class="pic" v-if="selectPicVideo(upperRow[n])" :style="{backgroundImage: `url(${baseUrl + upperRow[n].FeaturedImage})`}"></view>
							<iframe v-else :src="bvUrl(upperRow[n])" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
						</view>
						<view class="muti" >
							<view class="txt" v-html="textHtml(upperRow[n])">
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 黄昕焕 @ 2023年4月16日 页面
	// 黄昕焕 @ 2023年5月4日 绑定
	// 姚珅 @ 5月24日 返回组件添加以及绑定修改（真机调试视频不显示）
	import backBtn from './back.vue'
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import useCategory from '@/stores/digitalPlatform/useServerData'
	let n = ref(0);
	export default {
		components: {
			backBtn
		},
		data(){
			return{
				upperRow:[],
				baseUrl: "",
				n: 0,
				biliUrl: "https://player.bilibili.com/player.html?bvid="
			}
		},
		onLoad(opt){
			let promise = useCategory(opt.title || "两岸交流");
			promise.then(msg => {
				this.baseUrl = msg.baseUrl;
				this.upperRow = msg.data.upper;
			})
		},
		methods:{
			selectPicVideo(item)
			{
				if(!item)
				{
					return undefined;
				}
				return item.SubTopic ? false : true;
			},
			textHtml(item)
			{
				if(!item)
				{
					return undefined;
				}
				return item.Content;
			},
			bvUrl(item)
			{
				if(!item)
				{
					return undefined;
				}
				return this.biliUrl+item.SubTopic;
			}
		}
	};
</script>

<style lang="less">
	@import url(shared.less);	
	@title-size: 30rpx;
	@tab-title-size: 23rpx;
	@content-size: 25rpx;

	#exchange {
		.title-area{
			width: calc(32rpx * 22);
		}
			
		.main-content {
			width: 100%;
			min-height: calc(100vh - 417rpx);
			background-color: @bg-color;
			position: relative;

			.tab-container {
                .tabs{
					width: 670rpx;
					height: 50rpx;
					position: absolute;
					margin-top: -10rpx;
					display: flex;
					justify-content: space-around;
					
					.bg{
						background-color: #a5a5a5;
					}
				
					.tab{
						width:220rpx;
						height:40rpx ;
						
						.cn {
							width: 220rpx;
							height: 40rpx;
							font-size: @tab-title-size;
							line-height: 40rpx;
							text-align: center;
							color: #fff;
						}
										
						.en {
							width: 220rpx;
							height: 8rpx;
							background-color: #8B8E99;
						}
						
						.col{
							background-color: #F9EBD6;
						}
					}	
				}
			}

			.tab-panes{
				// width: 660rpx;
				// height: 620rpx;
				
				.tab-pane {
					width: 660rpx;
					height: 620rpx;
					background-color: #fff;
					border-radius: 30rpx;
					position: absolute;
					left: 50%;
					top: 186rpx;
					transform: translate(-50%);
					// display: none;
				
					.img-mini {
						width: 600rpx;
						height: 330rpx;
						margin: 60rpx auto 0 auto;
						box-shadow: 0px 0px 20rpx gray;
						.pic {
							width: 600rpx;
							height: 330rpx;
							background-position: 50% 50%;
							background-size: cover;
						}
						iframe {
							width: 100%;
							height: 100%;
						}
					}
				
					.muti {
						width: 620rpx;
						height: 187rpx;
						margin-left: 18rpx;
						margin-top: 23rpx;
						box-sizing: border-box;
				
						.txt {
							margin-left: 22rpx;
							width: 95%;
							font-size: @content-size;
							line-height: 38rpx;
							color: black;
						}
					}
				}
				
			}

			//.tab-panes
		}
	}
</style>